import React, { PureComponent } from 'react';
import styles from './styles.less';
import circle from '../../../../../assets/busi/performanceAnalysis/profitOverview/circle.png';
import darkBlueCircle from '../../../../../assets/busi/performanceAnalysis/profitOverview/darkBlueCircle.png';
import redCircle from '../../../../../assets/busi/performanceAnalysis/profitOverview/redCircle.png';
import title1 from '../../../../../assets/busi/performanceAnalysis/profitOverview/title.png';
import darkBlueTitle from '../../../../../assets/busi/performanceAnalysis/profitOverview/darkBlueTitle.png';
import redTitle from '../../../../../assets/busi/performanceAnalysis/profitOverview/redTitle.png';
export default class YieldItem extends PureComponent {
  render() {
    const { data, title, colorType } = this.props;
    let topCircle, bottomTitle;
    switch (colorType) {
      case 'darkBlue':
        (topCircle = darkBlueCircle), (bottomTitle = darkBlueTitle);
        break;
      case 'red':
        (topCircle = redCircle), (bottomTitle = redTitle);
        break;
      default:
        (topCircle = circle), (bottomTitle = title1);
    }
    return (
      <div className={styles.yieldItem}>
        <div className={styles.topCircle} style={{ backgroundImage: `url(${topCircle})` }}>
          <span className={styles.circleData}>{data}</span>
        </div>
        <div className={styles.bottomBox} style={{ backgroundImage: `url(${bottomTitle})` }}>
          <span className={styles.boxData}>{title}</span>
        </div>
      </div>
    );
  }
}
